<script setup lang='ts'>
//@ts-ignore
import {auth} from "~/service/auth.service";
// @ts-ignore
import {Space, Button} from '@arco-design/web-vue/es/index'
//@ts-ignore
const props = defineProps<{ cancel: Function, confirm: Function }>()

const appStore = useAppStore()

function onConfirm(): void {
    props.confirm();
}

function onCancel(): void {
    onClose();
    // props.cancel();
}

function onClose(): void {
    auth.destroyDiv('updatePopup');
}

</script>
<template>
    <div class="popup flex">
        <div class="card">
            <div class="title">网站公告</div>
            <div class="popup-main">
                <p class="info">{{ appStore.websiteConfig.notice }}</p>
                <cite class="cite">由{{ appStore.websiteConfig.author }}发布在{{
                    appStore.websiteConfig.name
                    }}的公告</cite>
            </div>
            <Space style="gap: 1rem">
                <Button type="primary" @click="onConfirm">确定</Button>
                <Button @click="onCancel">取消</Button>
            </Space>
        </div>
    </div>
</template>
<style lang='scss' scoped>
.popup {
  --font-color: 0deg 0% 15%;
  display: block;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding: 0 10px;
  background: #fff;
  width: 500px;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999999;
  transform: translateX(-50%) translateY(-50%);
  margin: 0 auto;
  border-radius: 18px;
  box-sizing: border-box;

  .card {
    padding: 20px 0;
    border-radius: 10px;
    text-align: center;
  }

  .title {
    color: var(--color-neutral-10);
    font-size: 18px;
    font-weight: 600;
    position: relative;
    display: inline-block;

    &:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 15px;
      left: 0;
      background: #fbeecd;
      bottom: 3px;
      border-radius: 4px;
      transform: skewX(-15deg);
      z-index: -1;
    }
  }

  .popup-main {
    background: #f3f5f7;
    border-radius: var(--radius);
    margin-bottom: 1rem;

    .info {
      padding: 0 0.25rem;
      font-size: .65rem;
      margin-inline: auto;
      letter-spacing: .01em;
      line-height: 2.5;
      text-align: justify;
      word-break: break-all;
      overflow-wrap: anywhere;
      counter-reset: section;
      margin-bottom: 0.5em;
      color: hsl(var(--font-color));
    }

    .cite {
      display: flex;
      font-size: var(--font-size-small);
      margin: -1em 1em 0;
      color: hsl(var(--font-color) / .5);
      justify-content: flex-end;

      &:before {
        content: "\2014\2014 \0020";
        color: hsl(var(--font-color) / .1);
        margin-right: 0.25em;
      }
    }
  }
}
</style>
